<template>
  <div>
    <div style="width: 100%; height: 400px;">
      <amap
        cache-key="map1"
        view-mode="2D"
        map-style="amap://styles/whitesmoke"
        async
        :zoom.sync="zoom"
        :center.sync="center"
        :pitch.sync="pitch"
        is-hotspot
        @hotspotclick="onHotspotClick"
      >
        <amap-marker
          :position="position"
          :label="{
            content: '辽宁省沈阳市浑南区沈本一街7-14号12门',
            direction: 'bottom',
          }"
        />
      </amap>
    </div>
  </div>
</template>

<script>
// your-component.vue
import { Amap, Marker } from '@amap/amap-vue';

export default {
  components: {
    Amap,
    AmapMarker: Marker,
  },
    data() {
    return {
      center: [123.482949,41.698022],
      position: [123.482949,41.698022],
      zoom: 16,
      pitch: 45,
    };
  },
  mounted(){
        console.log(this.$refs.contain)
    },
  methods: {
    // init(x,y){
    //   console.log(x,y)
    // },
    onHotspotClick(e) {
      console.log(e)
      if (e && e.lnglat) {
        this.center = [e.lnglat.lng, e.lnglat.lat];
      }
    },
  },
};
</script>
